<template>
	<div class="pageItemBody">
		<div class="pageItemBodyInner" ref="inner" v-if="show">
			<titleCom :name="name"></titleCom>
			<!--      主题部分-->
			<div class="itemMain" ref="itemMain">
				<slot></slot>
			</div>
		</div>
		<!--    向下展开的背景-->
		<div class="bg" ref="bg" v-if="!show"></div>
	</div>
</template>

<script>
	import gsap from 'gsap'
	import titleCom from './titleCom.vue'

	export default {
		name: "item",
		data() {
			return {
				show: false
			}
		},
		components: {
			titleCom
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			},
			delay: {
				type: Number,
				default () {
					return 0;
				}
			},
			duration: {
				type: Number,
				default () {
					return 0.5;
				}
			},
		},
		mounted() {
			var that = this;
			gsap.to(this.$refs.bg, {
				height: '100%',
				delay: that.delay,
				duration: that.duration, // 动画持续时间（以秒为单位）
				ease: 'none', // 使用线性动画缓动函数
				onComplete: () => {
					// 动画完成后触发的回调函数
					console.log('动画执行完成');
					setTimeout(() => {
						that.show = true
						// 添加新的 GSAP 动画来改变透明度
						that.$nextTick(() => {
							gsap.to(that.$refs.inner, {
								opacity: 1,
								duration: 1, // 这里可以设置渐显动画的持续时间
							});
						})
					}, 100)
				},
			});
		},
		methods: {},
	}
</script>

<style lang="scss" scoped>
	.pageItemBody {
		width: 100%;
		position: relative;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: column;
		z-index: 1;
		align-content: flex-start;
	}

	.pageItemBodyInner {
		width: 100%;
		position: relative;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: column;
		z-index: 10;
		align-content: flex-start;
		opacity: 0;
	}

	.bg {
		height: 0%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
		background: linear-gradient(to bottom, rgba(#003E78, 0.1), rgba(#003E78, 0.3));
	}

	.itemMain {
		position: relative;
		width: 100%;
		height: calc(100% - 44px);
		z-index: 10;
		background: linear-gradient(180deg, rgba(0, 62, 120, 0) 0%, rgba(0, 115, 222, 0.1568) 100%);
		border: 1px solid;
		border-top-width: 0px;
		border-image: linear-gradient(rgba(0, 142, 222, 0), rgba(0, 142, 222, .3)) 30 30;
	}
</style>